<template>
  <div>
    <!--第一种一张图片 -->
    <div
      class="titleContainbox"
      v-if="
        postData.type === 1 &&
        postData.cover.length > 0 &&
        postData.cover.length < 3
      "
    >
      <div class="titleContain">
        <div class="title">{{ postData.title }}</div>
        <div class="comment">
          <span
            >{{ postData.user.nickname }}
            {{ postData.comment_length }}跟帖</span
          >
        </div>
      </div>
      <img class="titpic" :src="postData.cover[0].url | tofullURL" alt="" />
    </div>
    <!--第二种三张图片-->
    <div
      class="titleContainboxtwo"
      v-if="postData.type === 1 && postData.cover.length >= 3"
    >
      <div class="title">{{ postData.title }}</div>
      <div class="titpic">
        <img :src="postData.cover[0].url | tofullURL" alt="" />
        <img :src="postData.cover[1].url | tofullURL" alt="" />
        <img :src="postData.cover[2].url | tofullURL" alt="" />
      </div>
      <div class="comment">
        <span
          >{{ postData.user.nickname }} {{ postData.comment_length }}跟帖</span
        >
      </div>
    </div>
    <!--第三种视频图片-->
    <div
      class="titleContainboxthree"
      v-if="postData.type === 2 && postData.cover.length >= 0"
    >
      <div class="title">{{ postData.title }}</div>
      <div class="titpic">
        <img :src="postData.cover[0].url | tofullURL" alt="" />
        <span class="iconfont iconshipin"></span>
      </div>
      <div class="comment">
        <span>
          {{ postData.user.nickname }} {{ postData.comment_length }}跟帖
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["postData"],
  filters: {
    // 内部组件过滤如果未带有http则在前面补全http
    tofullURL(url) {
      if (url.indexOf("http") > -1) {
        return url;
      } else {
        return this.$axios.defaults.baseURL + url;
      }
    },
  },
};
</script>

<style lang="less">
.titleContainbox {
  display: flex;
  padding: 10 / 360 * 100vw 10 / 360 * 100vw;
  border-bottom: 1px solid rgb(201, 201, 201);
  .titleContain {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    .title {
      font-size: 14 / 360 * 100vw;
    }
    .comment {
      font-size: 12 / 360 * 100vw;
    }
  }
  .titpic {
    width: 120 / 360 * 100vw;
    height: 75 / 360 * 100vw;
    object-fit: cover;
  }
}
.titleContainboxtwo {
  padding: 10 / 360 * 100vw 10 / 360 * 100vw;
  border-bottom: 1px solid rgb(201, 201, 201);
  .title {
    font-size: 14 / 360 * 100vw;
  }
  .comment {
    font-size: 12 / 360 * 100vw;
  }
  .titpic {
    display: flex;
    justify-content: space-between;
    padding: 8 / 360 * 100vw 0;

    img {
      width: 33%;
      height: 74 / 360 * 100vw;
      object-fit: cover;
    }
  }
}
.titleContainboxthree {
  padding: 10 / 360 * 100vw 10 / 360 * 100vw;
  border-bottom: 1px solid rgb(201, 201, 201);
  .title {
    font-size: 14 / 360 * 100vw;
  }
  .titpic {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 100%;
      padding: 8 / 360 * 100vw 0;
    }
    .iconshipin {
      position: absolute;
      font-size: 40 / 360 * 100vw;
      color: white;
      background-color: rgba(0, 0, 0, 0.3);
      border-radius: 50%;
    }
  }
  .comment {
    font-size: 12 / 360 * 100vw;
  }
}
</style>